<div nz-row>
	<div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="8"></div>
	<div nz-col nzXs="20" nzSm="16" nzMd="12" nzLg="8" nzXl="8">
		<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
			<nz-form-item>
				<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">邮箱地址</nz-form-label>
				<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入有效的邮箱地址!">
					<input nz-input formControlName="email" id="email" />
				</nz-form-control>
			</nz-form-item>
			<nz-form-item>
				<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>密码</nz-form-label>
				<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入密码!">
					<input nz-input type="password" id="password" formControlName="password"
						(ngModelChange)="updateConfirmValidator()" />
				</nz-form-control>
			</nz-form-item>
			<nz-form-item>
				<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>确认密码</nz-form-label>
				<nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="errorTpl">
					<input nz-input type="password" formControlName="checkPassword" id="checkPassword" />
					<ng-template #errorTpl let-control>
						<ng-container *ngIf="control.hasError('required')">请输入确认密码!</ng-container>
						<ng-container *ngIf="control.hasError('confirm')">
							您输入的两个密码不一致!
						</ng-container>
					</ng-template>
				</nz-form-control>
			</nz-form-item>
			<nz-form-item>
				<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickname" nzRequired nzTooltipTitle="你想让别人怎么称呼你">
					<span>昵称</span>
				</nz-form-label>
				<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请出入昵称!">
					<input nz-input id="nickname" formControlName="nickname" />
				</nz-form-control>
			</nz-form-item>
			<nz-form-item>
				<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber" nzRequired>手机号</nz-form-label>
				<nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['phoneNumber']"
					nzErrorTip="Please input your phone number!">
					<nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
						<ng-template #addOnBeforeTemplate>
							<nz-select formControlName="phoneNumberPrefix" class="phone-select">
								<nz-option nzLabel="+86" nzValue="+86"></nz-option>
								<nz-option nzLabel="+87" nzValue="+87"></nz-option>
							</nz-select>
						</ng-template>
						<input formControlName="phoneNumber" id="'phoneNumber'" nz-input />
					</nz-input-group>
				</nz-form-control>
			</nz-form-item>
			<nz-form-item>
				<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="website" nzRequired>个人主页</nz-form-label>
				<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入个人主页!">
					<input nz-input id="website" formControlName="website" placeholder="website" />
				</nz-form-control>
			</nz-form-item>
			<nz-form-item>
				<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="captcha" nzRequired nzTooltipTitle="请点击 '获取验证码'"
					[nzTooltipIcon]="captchaTooltipIcon">
					验证码
				</nz-form-label>
				<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入您获得的验证码!" nzExtra="请在邮箱中上查看发送的验证码.">
					<div nz-row [nzGutter]="8">
						<div nz-col [nzSpan]="12">
							<input nz-input formControlName="captcha" id="captcha" />
						</div>
						<div nz-col [nzSpan]="12">
							<button nz-button (click)="getCaptcha($event)">获取验证码</button>
						</div>
					</div>
				</nz-form-control>
			</nz-form-item>
			<nz-form-item nz-row class="register-area">
				<nz-form-control [nzSpan]="14" [nzOffset]="6">
					<label nz-checkbox formControlName="agree" for="">
						<span>
							我已经阅读
							<a>协议</a>
						</span>
					</label>
				</nz-form-control>
			</nz-form-item>
			<nz-form-item nz-row class="register-area">
				<nz-form-control [nzSpan]="14" [nzOffset]="6">
					<button nz-button nzType="primary">注册</button>
				</nz-form-control>
			</nz-form-item>
		</form>
	</div>
	<div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="8"></div>
</div>